<script lang="ts">
	import { page } from '$app/state';
	import { userStore } from '$lib/stores/user.svelte';
	import { ChevronsLeft } from 'lucide-svelte';
	import MsgList from './MsgList.svelte';
	import UserProfile from './UserProfile.svelte';
	import { goto } from '$app/navigation';

	const userId = page.params.userId;

	let curTab: 'msg' | 'profile' = $state(userStore.userInfo?.userId == userId ? 'msg' : 'profile');
</script>

<div class="ml-[100px] mr-[100px]">
	<div role="tablist" class="tabs tabs-lift p-1">
        <button type="button" class="btn btn-ghost" onclick={() => goto('/app')}>
			<ChevronsLeft size="32" />
		</button>
		{#if userStore.userInfo?.userId == userId}
			<button
				role="tab"
				class="tab {curTab == 'msg' ? 'tab-active' : ''} mb-[8px]"
				onclick={() => (curTab = 'msg')}>消息</button
			>
		{/if}
		<button
			role="tab"
			class="tab {curTab == 'profile' ? 'tab-active' : ''} mb-[8px]"
			onclick={() => (curTab = 'profile')}>用户信息</button
		>
	</div>
	<div class="relative">
		{#if curTab == 'msg'}
			<MsgList />
		{:else if curTab == 'profile'}
			<UserProfile {userId} />
		{/if}
	</div>
</div>
